<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">设备名称</div>
                <el-input v-model="search.device_name" placeholder="请输入设备名称" @click="openDev" readonly></el-input>
                <el-date-picker v-model="time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
            <div>
                <el-button @click="dialog.show = true">显示设置</el-button>
            </div>
        </el-header>
        <el-main class="nopadding" v-if="show==1">
            <scTable ref="table" :apiObj="table" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="监测时间" fixed prop="FDATE" align="center" width="150"></el-table-column>
                <el-table-column label="设备编码" fixed prop="code" align="center" width="150"></el-table-column>
                <el-table-column label="设备名称" fixed prop="title" align="center" width="150"></el-table-column>
                <el-table-column v-for="(item,index) in tableShow" :key="index" :label="item.line_title" :prop="item.field" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <!-- 控制展示列弹窗 -->
    <el-dialog v-model="dialog.show" title="自定义显示列" :before-close="handleClose"  width="1100" align-center draggable>
        <sc-form-table ref="table" v-model="form.item" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd hideDelete height="600">
            <el-table-column prop="val" label="表格名称">
                <template #default="scope">
                    <el-input v-model="scope.row.line_title" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="open" label="列表是否显示" width="80" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.line_show" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
        </sc-form-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog.show = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="isSaveing">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></device-list>
</template>

<script>
import deviceList from '@/views/device/deviceList.vue'
export default {
    components: { deviceList },
    name: 'selectFilter',
    data() {
        return {
            dialog:{
                show:false,
                save:false
            },
            search:{
                state_id:null,
                start_time:null,
                end_time:null,
                device_id:null
            },
            time:null,
            form:{
                type:3,
                item:[],
            },
            show:1,
            addTemplate:{},
            operate:[],
            tableShow:[],
            imgData:[],
            table:this.$API.jiankong.getMonitor.listAll,
            countSize:'',
            state_id:"",
            list:[]
        };
    },
    mounted() {
        this.getList()
        this.getImgAndTable()
        this.getDeviceList()
    },
    methods: {
        // 获取表，图片列表
        async getImgAndTable(){
            var res = await this.$API.jiankong.getMonitor.tableImg.get({type:this.show,pageSize:20,state_id:1,start_time:this.search.start_time,end_time:this.search.end_time});
            this.operate = res.data.statistics
            this.tableShow = res.data.table
            this.imgData = res.data.rows
            this.countSize = res.data.total 
        },
        // 获取展示字段列表
        async getList(){
            var res = await this.$API.all.getEqudateField.get();
            let array = []
            res.data.map(item=>{
                array.push({
                    chart_show:item.chart_show,
                    line_show:item.line_show,
                    line_title:item.line_title,
                    chart_title:item.chart_title,
                    field:item.field,
                    id:item.id,
                })
            })
            this.form.item = array
        },
        async getDeviceList(){
            var res = await this.$API.all.getDevice.get({is_page:0});
            this.list= res.data
        },
        // 提交需要展示的列
        async submit() {
            var res = [];
            res = await this.$API.jiankong.getMonitor.edit.post(this.form);
            if (res.code == 1) {
                this.$message.success("操作成功")
                this.dialog.show = false
                this.getImgAndTable()
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
		},
        // 搜索
        upsearch() {
            if(this.time!=null){
                this.search.start_time = this.time[0]
                this.search.end_time = this.time[1]
            }else{
                this.search.start_time = ""
                this.search.end_time = ""
            }
            this.$refs.table.upData(this.search)
		},
        // 选择设备
        openDev(){
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('add')
            })
        },
        handleSuccess(data) {
            this.search.device_name = data[0].title
            this.search.device_id = data[0].id
            this.upsearch()
        },
    },
};
</script>

<style scoped lang="scss">
div{
    user-select: none;
}
.operate {
    display: flex;
    align-items: center;
    div {
        display: flex;
        align-items: center;
        border-radius: 30px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        padding: 9px 17px;
        margin: 0 5px;
        cursor: pointer;
        .font {
        margin-left: 5px;
        }
    }
}
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .listDetail {
    margin: 9px;
    background: #f9d180;
    padding: 11px 16px;
    width: 225px;
    box-shadow: 1px 5px 8px 0px rgba(196, 196, 196, 0.13);
    border-radius: 10px;
    cursor: pointer;
    .imgAndText {
        border-bottom: 1px solid #ececec;
        img {
            width: 186px;
            height: 81px;
        }
        .text {
            padding: 6px 0;
            font-size: 16px;
            color: #000000;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .contont {
        padding-top: 6px;
        font-size: 14px;
        color: #525354;
        .order {
            padding: 2px 0;
        }
    }
  }
}
.background {
    color: #FFF;
    border: 1px solid #73b800;
    background: #409eff;
}
</style>
